<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }


        /* 所有的宽高都是基于设计图。当时由于我们没有设计图，只好通过谷歌浏览器的插件测量。 */

        /*
           CSS代码 和 demo28没有任何区别。只是HTML 做了改变，使用了一些更语义化的标签。
           header、 article、section 、footer 和 div 在使用上没有差别——可以互相替代。
           只是，这样对于浏览器和开发者来说都比较友好，还有一起他的语义化标签，可以自行搜索学习一下。
        */

        html,body{
            width: 100%;
            height: 100%;
        }

        #header{
            width: 100%;
            height: 686px;
            background: burlywood;
        }


        #content{
            width: 100%;
            height: 2060px;
            padding-top: 20px;
            background-color: gainsboro;
        }


        /* 中间区域需要水平居中 */
        #container{
            width: 1068px;
            height: 100%;
            margin: 0 auto;
        }


        #content-left{
            width: 780px;
            height: 100%;
            float: left;
            background: white;
        }

        /*
          四个小分区宽度一样；都有内边距；除最后一个外，底部都有margin.
          共有的属性，一般写在一起回好一些。方便同时修改，节省代码量。
        */
        #content-left>div{
            width: 780px;
            padding: 20px;
            margin-bottom: 20px;
            /*
             防止padding把区域变大。
             */
            box-sizing: border-box;
            background: olivedrab;
        }

        #hot-class{
            height: 355px;
        }

        #good-share{
            height: 500px;
        }
        #special-class{
            height: 355px;
        }
        #elaborate-class{
            height: 790px;
            /* 最后一个底部没有距离 */
            margin-bottom: 0;
        }

        #content-right{
            width: 270px;
            height: 100%;
            padding: 22px;
            float: right;
            /* 防止内边距把区域变大 */
            box-sizing: border-box;
            background: white;
        }


        /*===========================底部*/

        #footer{
            width: 100%;
            height: 350px;
            background: white;
        }

        .footer-partner {
            height: 350px;
            width: 1070px;
            margin: 0 auto;
            background-color: white;
        }

        .footer-left {
            width: 740px;
            float: left;
            padding: 20px;
        }

        .footer-left .up>img {
            margin: 15px 30px 0 10px;
            width: 80px;
        }

        .footer-left .up>img:nth-of-type(6),
        .footer-left .up>img:nth-of-type(12) {
            margin-right: 0;
        }

        .footer-left .up>a {
            display: inline-block;
            text-decoration: none;
            margin: 15px 30px 0px 10px;
            color: black;
            position: relative;
            top: -10px;
        }

        .footer-left .down {
            margin-top: 10px;
        }

        .footer-left .down>a {
            float: left;
            text-decoration: none;
            margin: 10px 20px 0 10px;
            color: black;
            font-size: 13px;
        }

        .footer-right {
            width: 227px;
            float: right;
            padding: 20px;
        }

        .footer-right>img {
            margin: 10px 0px;
            background-color: white;
        }
        /*版权*/

        #footer .copyright {
            width: 100%;
            background-color: #A9A9A9;
            text-align: center;
            padding: 30px 0px;
            font-size: 11px;
        }

        #footer .copyright>p {
            margin-bottom: 5px;
        }

        #footer .copyright>p:nth-child(1)>a {
            margin-right: 20px;
            text-decoration: none;
            color: black;
            border-right: 1px solid black;
            padding-right: 20px;
            font-size: 12px;
        }

        #footer .copyright>p:nth-child(1)>a:nth-child(3) {
            margin-right: 0px;
            border-right: 0px solid black;
            padding-right: 0px;
        }
    </style>
</head>

<body>

<header id="header" >

</header>

<article id="content">
    <article id="container">
        <section id="content-left">

            <div id="hot-class"></div>

            <div id="good-share"></div>

            <div id="special-class" ></div>

            <div id="elaborate-class" ></div>
        </section>
        <aside id="content-right"></aside>
    </article>
</article>

<footer id="footer">

    <div class="footer-partner">
        <div class="footer-left">
            <div class="up">
                <p>开放平台</p>
                <img src="imgs/img-daxue/ke.png" />
                <img src="imgs/img-daxue/bugly_logo.jpg" />
                <img src="imgs/img-daxue/cloud.png" />
                <img src="imgs/img-daxue/ieg.png" />
                <img src="imgs/img-daxue/hitem1.jpg" />
                <img src="imgs/img-daxue/hitem3.jpg" />
                <img src="imgs/img-daxue/hitem6.jpg" />
                <img src="imgs/img-daxue/hitem8.jpg" />
                <img src="imgs/img-daxue/hitem9.jpg" />
                <img src="imgs/img-daxue/logo_bigdata.png" />
                <img src="imgs/img-daxue/logo_guangdiantong.png" />
                <img src="imgs/img-daxue/link_open.png" />
                <img src="imgs/img-daxue/wetest_logo.png" />
                <img src="imgs/img-daxue/meia.png" />
                <a href="#">更多</a>
            </div>
            <div class="down">
                <p>合作伙伴</p>
                <a href="#">腾讯云论坛</a>
                <a href="#">TechWeb</a>
                <a href="#">腾讯Alloyteam</a>
                <a href="#">CSDN</a>
                <a href="#">36Kr</a>
                <a href="#">DoNews</a>
                <a href="#">APP游戏部落</a>
                <a href="#">天极网</a>
                <a href="#">凤凰网科技频道</a>
                <a href="#">易观网</a>
                <a href="#">馒头商学院</a>
                <a href="#">雷锋网</a>
                <a href="#">飞象网</a>
                <a href="#">数码港</a>
                <a href="#">艾瑞网</a>
                <a href="#">落伍者</a>
                <a href="#">LAMP人</a>
                <a href="#">QQ浏览器</a>
            </div>
        </div>
        <div class="footer-right">
            <p>收听微博</p>
            <img src="imgs/img-daxue/opentweibo.png" />
            <p>关注空间</p>
            <img src="imgs/img-daxue/openzone.png" />
        </div>
    </div>
    <div class="copyright">
        <p><a href="#">服务协议</a><a href="#">隐私政策</a><a href="#">版权保护投诉指引</a></p>
        <p>Copyright&copy;1998 - 2017 Tencent. All Rights Reserved.</p>
        <p>腾讯公司 版权所有</p>
    </div>

</footer>

</body>
</html>